<template>
	<view>
		<view class="form">
			<view class="form-item">
				<view class="form-item-header">
					<view class="form-item-header-num ">
						第<input type="number" v-model="form.sort" placeholder="请输入" placeholder-class="ac">个
					</view>
					<view class="form-item-header-img">
						<view class="form-item-header-img-i" @click="open">
							<image :src="form.img" mode="aspectFill" v-if="form.img"></image>
							<view class="form-item-header-img-i-add" v-else>
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
							<view class="form-item-header-img-i-tx">图标</view>
						</view>
						<view class="form-item-header-img-i" @click="upload()"  v-if="type == 1||type==3" style="margin-left: 80rpx;">
							<image :src="form.qr_code" mode="aspectFill" v-if="form.qr_code"></image>
							<view class="form-item-header-img-i-add" v-else>
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
							<view class="form-item-header-img-i-tx">二维码</view>
						</view>
					</view>
					<view class="form-item-header-switch">
						<u-switch :value="form.state" :activeValue="1" :inactiveValue="0" activeColor="#64aa6b" size="20" @change="switchChange"></u-switch>
					</view>
				</view>
				<view class="form-item-c">
					<view class="form-item-c-l">
						<text>链</text>
						<text>接</text>
						<text>设</text>
						<text>置</text>
					</view>
					<view class="form-item-c-r">
						<view class="form-item-input">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入引流标题,必填项" placeholder-class="ac" v-model="form.title" />
						</view>
						<view class="form-item-input" v-if="type === 1">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入网址" placeholder-class="ac" v-model="form.url"/>
						</view>
						<view class="form-item-input" v-if="type === 1">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入用户名或账号ID" placeholder-class="ac" v-model="form.sign" />
						</view>
						<view class="form-item-input" v-if="type === 2">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入视频号" placeholder-class="ac"
								v-model="form.finderUserName"  @input="changeInput"/>
						</view>
						<view class="form-item-input" v-if="form.name=='小程序'||form.type==3||form.appid">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入appid" placeholder-class="ac"
								v-model="form.appid" />
						</view>
						<!-- <view class="form-item-input" v-if="type === 2">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" placeholder="请输入视频号feedId" placeholder-class="ac"
								v-model="form.feedId"  @input="changeInput"/>
						</view> -->
					</view>
				</view>
				<view class="form-item-c" v-if="(form.qr_code&&form.sign || form.qr_code&&form.url || form.sign&&form.url) && !form.finderUserName">
					<view class="form-item-c-l">
						<text>自</text>
						<text>定</text>
						<text>义</text>
						<text>菜</text>
						<text>单</text>
					</view>
					<view class="form-item-c-r">
						<view class="form-item-input" v-if="form.qr_code">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" :placeholder="ph_qr_code_name" placeholder-class="ac"
								v-model="form.qr_code_name" />
						</view>
						<view class="form-item-input" v-if="form.sign">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" :placeholder="ph_sign_name" placeholder-class="ac"
								v-model="form.sign_name" />
						</view>
						<view class="form-item-input" v-if="form.url">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
							<input type="text" :placeholder="ph_url_name" placeholder-class="ac"
								v-model="form.url_name" />
						</view>
					</view>
				</view>
				<view class="form-item-footer">
					<view class="form-item-footer-tx" @click="toRule">如何获取链接和二维码？</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view @click="submit">保存</view>
			<view @click="add">取消</view>
		</view>
		<iconsPopupVue ref="iconsPopupVueRef" @change="change" />
	</view>
</template>

<script>
	import {
		tree_add,tree_edit,tree_default
	} from '@/common/http/api.js'
	import iconsPopupVue from './components/icons-popup/icons-popup.vue';
	import {
		uploadImg
	} from '@/common/upload.js'
	export default {
		components: {
			iconsPopupVue
		},
		data() {
			return {
				ph_qr_code_name:'',
				ph_sign_name:'',
				ph_url_name:'',
				form: {
				
					img: '', //图标链接
					qr_code: '', //二维码
					title: '', //标题
					url: '', //链接
					sign: '', //标识符
					qr_code_name: '', //自定义二维码按钮描述
					url_name: '', //自定义链接按钮描述
					sign_name: '', //自定义标识按钮描述
					sort: '', //排序
					feedId: '',
					finderUserName: '',
					state: 1
				},
				isManage:'',
				type: 1
			}
		},
		onLoad(e) {
			if(e.id) {
				this.form.id = e.id
				const item = uni.getStorageSync('link-tree')
				this.form = item
				this.type=item.type
				if(this.form.finderUserName) {
					this.type = 2
				}
			}
			if(e.sort) {
				this.form.sort = e.sort
			}
			
			if(e.isManage){ //圈主
				this.isManage=e.isManage
			}
			tree_default().then(res=>{
			
				
				this.ph_qr_code_name=res.data.qr_code_name
				this.ph_sign_name=res.data.sign_name
				this.ph_url_name=res.data.url_name
			})
		},
		methods: {
			toRule(){
				uni.navigateTo({
					url: '/pagesA/aboutUs/aboutUs?id=42'
				})
			},
			changeInput(){
				if(this.type == 2 || this.type==3) {
					this.form.qr_code = ''
				}
			},
			upload() {
				uploadImg().then(res => {
				
					this.form.qr_code = res.data.url
					if(this.type == 2|| this.type==3) {
						this.form.feedId = ''
						this.form.finderUserName = ''
					}
					
				})
			},
			open() {
				this.$refs.iconsPopupVueRef.show()
			},
			async submit() {
				await this.$mValidate(
					[
						{
							require: true,
							key: 'sort',
							message: '请输入排序'
						},
						{
							require: true,
							key: 'img',
							message: '请选择图标'
						},
						// {
						// 	require: true,
						// 	key: 'qr_code',
						// 	message: '请上传二维码'
						// },
						{
							require: true,
							key: 'title',
							message: '请输入引流标题'
						},
						// {
						// 	require: true,
						// 	key: 'url',
						// 	message: '请输入网址'
						// },
						// {
						// 	require: true,
						// 	key: 'sign',
						// 	message: '请输入用户名或账号ID'
						// },
						// {
						// 	require: true,
						// 	key: 'finderUserName',
						// 	message: '请输入视频号finderUserName'
						// },
						// {
						// 	require: true,
						// 	key: 'qr_code_name',
						// 	message: '请输入自定义菜单名称'
						// },
						// {
						// 	require: true,
						// 	key: 'sign_name',
						// 	message: '请输入自定义菜单名称'
						// },
						// {
						// 	require: true,
						// 	key: 'url_name',
						// 	message: '请输入自定义菜单名称'
						// },
						
					], this.form)

				if (this.type === 2) {
					// await this.$mValidate(
					// 	[
					// 		{
					// 			require: true,
					// 			key: 'sign',
					// 			message: '请输入用户名或账号ID'
					// 		},
					// 		{
					// 			require: true,
					// 			key: 'finderUserName',
					// 			message: '请输入视频号finderUserName'
					// 		},
					// 	], this.form)
					if(!(this.form.qr_code || (this.form.finderUserName))) {
						this.$u.toast('请上传视频号信息！')
						return
					}
				}
				
				const http = this.form.id ? tree_edit : tree_add
				this.form.type=this.type
				if(this.isManage){
					this.form.circle_id=this.isManage
				}
				http(this.form).then(res=>{
					this.$u.toast(this.form.id ? '编辑成功' : '新增成功')
					setTimeout(()=>{
						uni.navigateBack()
					}, 1500)
				})
			},
			change(e) {
			    
				const type = Number(e.type)
				this.form.img = e.img
				this.form.name=e.name
				this.form.appid=''
				this.type = type
	
				if (type == 2|| type==3) {
					
					this.form.feedId = ''
					this.form.finderUserName = ''
					this.form.url = ''
					this.form.qr_code = ''
				}
			},
			switchChange(e) {
				console.log('e', e)
				this.form.state = e
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.form {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		margin-bottom: 30rpx;

		.form-item {
			background: white;
			width: 100%;
			// box-shadow: 0rpx 0rpx 5rpx #999;
			border-radius: 20rpx;

			.form-item-header {
				width: 100%;
				padding: 70rpx 0 30rpx;
				position: relative;

				.form-item-header-num {
					width: auto;
					height: 50rpx;
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666;

					input {
						box-sizing: border-box;
						padding: 0 5rpx;
						display: flex;
						align-items: center;
						text-align: center;
						height: 100%;
						width: 88rpx;
						font-size: 26rpx;
						color: #666;
						border: 1px solid #999999;
						margin: 0 8rpx;
						border-radius: 10rpx;
					}

					.ac {
						font-size: 22rpx;
						display: flex;
						align-items: center;
					}
				}

				.form-item-header-img {
					width: 100%;
					box-sizing: border-box;
					padding: 0 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;

					.form-item-header-img-i {
						width: 150rpx;

						.form-item-header-img-i-add {
							width: 151rpx;
							height: 151rpx;
							border-radius: 20rpx;
							border: 1px solid #999999;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 48rpx;
								height: 49rpx;
							}
						}

						&>image {
							width: 150rpx;
							height: 150rpx;
						}

						.form-item-header-img-i-tx {
							width: 100%;
							text-align: center;
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
				}

				.form-item-header-switch {
					width: 100rpx;
					height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
			}

			.form-item-c {
				background: #F6F6F6;
				border-radius: 30rpx;
				width: calc(100% - 60rpx);
				margin: 0 auto;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 40rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.form-item-c-l {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #9D9D9B;
					font-size: 28rpx;
					margin-right: 30rpx;
				}

				.form-item-c-r {
					min-width: 0;
					flex: 1;

					.form-item-input {
						width: 100%;
						border-bottom: 1rpx solid #999;
						display: flex;
						align-items: center;

						input {
							min-width: 0;
							flex: 1;
							padding: 15rpx 0;
							margin-left: 10rpx;
							font-size: 28rpx;
						}

						.ac {
							color: #9D9D9B;
							font-size: 28rpx;
						}
					}
				}
			}

			.form-item-footer {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx 20rpx;

				.form-item-footer-tx {
					font-size: 28rpx;
					color: #58B481;
					flex: 1;
					min-width: 0;
				}

				.form-item-footer-r {
					display: flex;
				}
			}
		}
	}

	.btns {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;

		view {
			background: #58B481;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			width: 200rpx;
			padding: 20rpx 10rpx;
			text-align: center;

			&:first-child {
				margin-right: 40rpx;
			}
		}
	}
</style>